<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录 - WoniuHis</title>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/login.css" media="all">
    <script src="../../js/vue.js"></script>  <!-- vue追加 -->
    <script src="../../js/axios.min.js"></script>        <!-- vue的AJAX追加 -->
	<style>
		.login-box {
			margin: 0 auto;
		}
		.login-form {
			border:2px solid red;
		}
		.error {
			color:red !importment;
		}
	</style>

</head>
<body>
<br/><br/><br/><br/>
<div class="layadmin-user-login-box layadmin-user-login-header" id="login">
   	<h2>WoniuHis</h2>
    <p>登录</p>
    <br/><br/><br/>
    <p class="error" v-show="loginResultBoolean" v-text="loginResult"></p>
    <form class="layui-form" action="">
        <div class="layui-input-inline">
            <input type="text" v-model="userName" placeholder="请输入登录名" autocomplete="off" class="layui-input">
        </div>
        <br/><br/>
        <div class="layui-input-inline">
            <input type="password" v-model="userPassword" required lay-verify="required" placeholder="请输入密码"
                   autocomplete="off" class="layui-input">
        </div>
        <br/><br/>
        <div class="layui-input-inline">
            <input type="text" v-model="verifyCode" placeholder="请输入验证码" autocomplete="off" class="layui-input">
        </div>
        <br/><br/>
        <img src="" id="verifyCodeImg">
        <a href="javascript:changeVerifyImg()">看不清，换一张</a>
        <br/><br/>
        <span>如果还没有账号请</span><a href="/views/register.html"style="color: #FFA500">注册</a><br/>
		
        <input type="button" @click="userlogin" value="登录" class="layui-btn"></input>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </form>
</div>
<script>
	//获取项目名
	function getPathname(){
	 	var index = window.location.pathname.indexOf('/',1);
		return window.location.pathname.substring(0,index);
	}
	//修改验证码
	function changeVerifyImg(){
		document.getElementById("verifyCodeImg").src="/generateVerifyCode?d="+ new Date();
	}
    new Vue({
        el: "#login",
        data: {
            userName: "",
            userPassword: "",
            verifyCode:"",
            loginResultBoolean:false,
            loginResult:""
        },
        methods: {
            userlogin: function () {
                axios.get( "/login", {
                        params: {
                            userName: this.userName,
                            userPassword: this.userPassword,
                            verifyCode: this.verifyCode
                        }
                    }
                ).then(data => {
                	console.log(data.data);
                    if (data.data.code == 200) {
                    	this.loginResultBoolean = false
                        window.location.href = "/views/index.html"
                    }else{
                    	this.loginResultBoolean = true
                    	this.loginResult = data.data.msg;
                    	changeVerifyImg()
                    }
                }).catch(err => {
                    alert(err.data.msg);

                })
            },

        },
        mounted(){
        	changeVerifyImg()
        }
    })
</script>

</body>
</html>